import React, { Component } from 'react';
import { observer, inject } from "mobx-react";
import { Dropdown, Menu, message } from 'antd';
import cass from 'classnames';
import s from './index.module.less';
import SearchBar from '../common/searchBar';
import UserItem from '../../components/UserItem';

@inject(({ contactsState }) => ({ contactsState }))
@observer
class UserList extends Component {

    state={
        activeIndex: null
    }

    componentWillMount(){
        const { contactsState: { getSortList, applyCount }, contactid } = this.props;
        getSortList({ searchkey: '' }, (list) => {
            // 其它页面跳转过来做的处理
            this.handleJumpToActiveItem(contactid, list);
        });

        // 轮询请求是否有新的好友请求
        applyCount();
        this.timer = setInterval(() => {
            applyCount();
        }, 5000);
    }

    componentWillReceiveProps(nextProps) {
        const { contactid } = this.props;
        if (nextProps.contactid && contactid !== nextProps.contactid) {
            this.handleJumpToActiveItem(nextProps.contactid, nextProps.contactsState.sortedContacts);
        }
    }

    componentWillUnmount(){
        clearInterval(this.timer);
        this.timer = null;
    }

    handleJumpToActiveItem = (contactid, list) => {
        if(contactid) {
            let v, i;
            try {
                list.forEach((l, outi) => {
                    l.list.forEach((g, ini) => {
                        if(g.recid === contactid){
                            v = g;
                            i = `${outi}-${ini}`;
                            // 避免遍历太多，使用try catch捕捉错误的方式结束foreach循环
                            throw new Error('finded target');
                        }
                    });
                })
            } catch(e) {
                console.log('--终止foreach循环遍历');
            }

            if(v) this.viewDetail(v, i);
        }
    }

    viewDetail = (v, i) => {
        this.setState({ activeIndex: i });
        this.props.contactsState.getDetail(v);
    }

    viewList = () => {
        this.setState({ activeIndex: -1 });
        this.props.contactsState.applyList(true);
    }

    deleteContact = (recid) => {
        this.props.contactsState.deleteContact({ recids: [recid] }, () => {
            message.success('删除好友成功');
        });
    }

    render() {
        const { sortedContacts = [], hasNew } = this.props.contactsState;
        const { activeIndex } = this.state;
        return (
            <>
                <SearchBar stateKey={'contactsState'} add />
                <div className={s.listContent}>
                    <div className={s.header}>
                        <h3>好友验证</h3>
                        <div className={cass(s.item, 'hovergray', { [s.active]: activeIndex === -1 })} onClick={this.viewList}>
                            <div className={s.add}>
                                {hasNew ? <span className={cass('mdi mdi-circle', s.hasNew)} /> : null}
                                <span className="mdi mdi-account-plus" />
                            </div>
                        </div>
                    </div>
                    <div>
                        <h3>联系人</h3>
                        {sortedContacts.map((v,i) => (
                            <div key={v.letter}>
                                <div className={s.letter}>{v.letter}</div>
                                {v.list.map((l, li) => (
                                    <Dropdown 
                                        key={l.recid}
                                        overlay={
                                            <Menu onClick={({ key }) => this[key](l.recid)}>
                                                <Menu.Item key="deleteContact">删除联系人</Menu.Item>
                                            </Menu>
                                        }
                                        trigger={['contextMenu']}
                                    >
                                        {/* 好像Dropdown子组件的最外层必须要求是原生dom元素才可以触发事件 */}
                                        <div>
                                            <UserItem 
                                                username={l.realname}
                                                headimage={l.headimage}
                                                active={activeIndex === `${i}-${li}`}
                                                onClick={() => this.viewDetail(l, `${i}-${li}`)}
                                            />
                                        </div>
                                    </Dropdown>
                                ))}
                            </div>
                        ))}
                    </div>
                </div>
            </>
        );
    }
}

export default UserList